<template>
  <div>
    <el-form ref="registerForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">注册</h3>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" placeholder="请输入用户名" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="repeat_password">
        <el-input type="password" placeholder="请确认密码" v-model="form.repeat_password"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input type="text" placeholder="邮箱" v-model="form.email"/>
      </el-form-item>
      <el-form-item label="验证码" prop="verifyCode">
        <el-input type="text" class="code" placeholder="输入验证码" v-model="form.verifyCode"/>
        <el-button ref="send" :disabled="disabledStatus" size="medium" class="send" v-on:click.native="verifyEmail">
          <span v-show="show">发送</span>
          <span v-show="show===false">{{ time }}s</span>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('registerForm')">注册</el-button>
        <el-button type="default">取消</el-button>
      </el-form-item>
      <div style="text-align: center"><span>已有账号？</span>
        <router-link to="/login">登录</router-link>
      </div>
    </el-form>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: "Register",
  data() {
    const v_username = (rule, value, callback) => {
      if (value === '') {
        callback("用户名不能为空");
      } else if (value.length < 3 || value.length > 20) {
        callback("用户名长度在3-20个字符之间");
      } else {
        let specReg = /[^0-9a-zA-Z]/
        if (specReg.test(value)) {

          callback("用户名不允许出现特殊字符");
        } else {
          this.verifyUsername(callback);
        }
      }
      callback();
    };
    const v_r_password = (rule, value, callback) => {
      if (value === '') {
        callback("请确认密码");
      } else {
        if (value !== this.form.password) {
          callback("两次密码不一致");
        } else {
          callback();
        }
      }
    };
    const v_email = (rule, value, callback) => {
      if (value === '') {
        callback("请输入邮箱");
      } else {
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        if (!regEmail.test(value)) {
          callback("请输入正确的邮箱");
        } else {
          callback();
        }
      }
    };
    const v_password = (rule, value, callback) => {
      if (value === '') {
        callback("密码不能为空");
      } else if (value.length < 6 || value.length > 20) {
        callback("密码长度在6-20个字符之间");
      } else {
        let small = /\.*[a-z]+\.*/
        let big = /\.*[A-Z]+\.*/
        let num = /\.*[0-9]+\.*/
        if (!(small.test(value) && big.test(value) && num.test(value))) {
          callback("密码必须由数字、小写字母、大写字母组成");
        } else {
          callback();
        }
      }
    };
    return {
      form: {
        email: '',
        username: '',
        password: '',
        repeat_password: '',
        verifyCode: '',
      },
      rules: {
        username: [{required: true, validator: v_username, trigger: 'blur'}],
        password: [{required: true, validator: v_password, trigger: 'blur'}],
        repeat_password: [{required: true, validator: v_r_password, trigger: 'blur'}],
        email: [{required: true, validator: v_email, trigger: 'blur'}],
        verifyCode: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
      },
      show: true,
      time: 0,
      disabledStatus:false,
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/user/register", qs.stringify({
            code: this.form.verifyCode,
            username: this.form.username,
            password: this.form.password,
            email: this.form.email,
          })).then((response) => {
            if (response.data === 404) {
              this.$message.error("验证码错误");
            } else {
              this.$message.success("注册成功");
              this.$router.push('/login');
            }
          })
        }
      })
    },
    verifyUsername(callback) {
      this.axios.post("/user/verifyUsername", qs.stringify({
        username: this.form.username
      })).then((response) => {
        if (response.data === 404) {
          callback("用户名已存在");
        }
      })
    },
    verifyEmail() {
      this.axios.post('/user/emailVerify', qs.stringify({
        email: this.form.email,
      })).then((response) => {
        if (response.data === 404) {
          this.$message.warning("发送失败，请检查邮箱是否正确")
        } else {
          this.time = 60;
          this.show = false;
          this.disabledStatus = true;
          this.setShowTime();
          this.$message.success("邮件已发送，请前往邮箱查看");
        }
      })
    },
    setShowTime(){
      this.time--;
      if (this.time!==0) {
        let that = this;
        setTimeout(function () {
          that.setShowTime();
        }, 1000)
      }else {
        this.show = true;
        this.disabledStatus = false;
      }
    }
  }
}
</script>

<style scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}

.code {
  width: 68%;
}

.send {
  width: 30%;
}

a {
  color: #409eff;
  text-decoration: none;
}
</style>
